<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html">
<body>
	<ui:composition>
		<ui:insert name="head">
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
			<title>Internet Dreams</title>
			<link
				href="#{facesContext.externalContext.requestContextPath}/resources/css/screen.css"
				rel="stylesheet" type="text/css" />
			<!--[if IE]>
		<link rel="stylesheet" media="all" type="text/css" href="css/pro_dropline_ie.css" />
		<![endif]-->
			<!--  jquery core -->
			<h:outputScript library="js" name="jquery/jquery-1.4.1.min.js"></h:outputScript>
			<!--  checkbox styling script -->
			<h:outputScript library="js" name="jquery/ui.core.js"></h:outputScript>
			<h:outputScript library="js" name="jquery/ui.checkbox.js"></h:outputScript>
			<h:outputScript library="js" name="jquery/jquery.bind.js"></h:outputScript>
			<script type="text/javascript">
				$(function() {
					$('input').checkBox();
					$('#toggle-all').click(function() {
						$('#toggle-all').toggleClass('toggle-checked');
						$('#mainform input[type=checkbox]').checkBox('toggle');
						return false;
					});
				});
			</script>

			<!--[if IE]>
		<h:outputScript library="js" name="jquery/jquery.selectbox-0.5.js"></h:outputScript>
		<script type="text/javascript">
			$(document).ready(function() {
				$('.styledselect').selectbox({
					inputClass : "selectbox_styled"
				});
			});
		</script>
		<![endif]-->

			<!--  styled select box script version 2 -->
			<h:outputScript library="js"
				name="jquery/jquery.selectbox-0.5_style_2.js"></h:outputScript>
			<script type="text/javascript">
				$(document).ready(function() {
					$('.styledselect_form_1').selectbox({
						inputClass : "styledselect_form_1"
					});
					$('.styledselect_form_2').selectbox({
						inputClass : "styledselect_form_2"
					});
				});
			</script>

			<!--  styled select box script version 3 -->
			<h:outputScript library="js"
				name="jquery/jquery.selectbox-0.5_style_2.js"></h:outputScript>
			<script type="text/javascript">
				$(document).ready(function() {
					$('.styledselect_pages').selectbox({
						inputClass : "styledselect_pages"
					});
				});
			</script>

			<!--  styled file upload script -->
			<h:outputScript library="js" name="jquery/jquery.filestyle.js"></h:outputScript>
			<script src="js/jquery/jquery.filestyle.js" type="text/javascript"></script>
			<script type="text/javascript" charset="utf-8">
				$(function() {
					$("input.file_1").filestyle({
						image : "images/forms/choose-file.gif",
						imageheight : 21,
						imagewidth : 78,
						width : 310
					});
				});
			</script>

			<!-- Custom jquery scripts -->
			<h:outputScript library="js" name="jquery/custom_jquery.js"></h:outputScript>

			<!-- Tooltips -->
			<h:outputScript library="js" name="jquery/jquery.tooltip.js"></h:outputScript>
			<h:outputScript library="js" name="jquery/jquery.dimensions.js"></h:outputScript>
			<script type="text/javascript">
				$(function() {
					$('a.info-tooltip ').tooltip({
						track : true,
						delay : 0,
						fixPNG : true,
						showURL : false,
						showBody : " - ",
						top : -35,
						left : 5
					});
				});
			</script>


			<!--  date picker script -->
			<h:outputStylesheet library="css" name="datePicker.css"></h:outputStylesheet>
			<h:outputScript library="js" name="jquery/date.js"></h:outputScript>
			<h:outputScript library="js" name="jquery/datePicker.js"></h:outputScript>
			<script type="text/javascript" charset="utf-8">
				$(function() {

					// initialise the "Select date" link
					$('#date-pick').datePicker(
					// associate the link with a date picker
					{
						createButton : false,
						startDate : '01/01/2005',
						endDate : '31/12/2020'
					}).bind(
					// when the link is clicked display the date picker
					'click', function() {
						updateSelects($(this).dpGetSelected()[0]);
						$(this).dpDisplay();
						return false;
					}).bind(
					// when a date is selected update the SELECTs
					'dateSelected', function(e, selectedDate, $td, state) {
						updateSelects(selectedDate);
					}).bind('dpClosed', function(e, selected) {
						updateSelects(selected[0]);
					});

					var updateSelects = function(selectedDate) {
						var selectedDate = new Date(selectedDate);
						$('#d option[value=' + selectedDate.getDate() + ']')
								.attr('selected', 'selected');
						$(
								'#m option[value='
										+ (selectedDate.getMonth() + 1) + ']')
								.attr('selected', 'selected');
						$(
								'#y option[value='
										+ (selectedDate.getFullYear()) + ']')
								.attr('selected', 'selected');
					}
					// listen for when the selects are changed and update the picker
					$('#d, #m, #y').bind(
							'change',
							function() {
								var d = new Date($('#y').val(),
										$('#m').val() - 1, $('#d').val());
								$('#date-pick').dpSetSelected(d.asString());
							});

					// default the position of the selects to today
					var today = new Date();
					updateSelects(today.getTime());

					// and update the datePicker to reflect it...
					$('#d').trigger('change');
				});
			</script>

			<!-- MUST BE THE LAST SCRIPT IN <HEAD></HEAD></HEAD> png fix -->
			<h:outputScript library="js" name="jquery/jquery.pngFix.pack.js"></h:outputScript>
			<script type="text/javascript">
				$(document).ready(function() {
					$(document).pngFix();
				});
			</script>
		</ui:insert>
	</ui:composition>
</body>
</html>